<!--精品基本信息 -->


<template>
  <div style="padding: 2% 3%;">


    <el-row>
      <el-button-group>
        <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
        <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>
        <el-button v-if="value||toggleShow" type="success" :size='size' @click="save" >保存</el-button>

        <!-- 修改下拉框 -->

      </el-button-group>
      <template v-if="!toggleShow">
        <el-select style="margin-left: 1.25rem;" @change="editChange" :size="size" v-model="value" placeholder="请选择广宣名称">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>

    </el-row>


    <!-- 新增 -->
    <el-row v-if="toggleShow">
      <el-divider></el-divider>
      <!-- 改成行类表单  :inline="true"  -->
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="广宣名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入广宣名称"></el-input>
        </el-form-item>

        <el-form-item label="日期" prop="date">
          <el-date-picker style="width: 102%;" v-model="form.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="投放方式" prop="touFangmethod">
       <div class="block">
         <el-cascader :show-all-levels="false" clearable v-model="form.touFangMethod" :options="touFangmethods"
           @change="handleChange"></el-cascader>
       </div>
        </el-form-item>
        <el-form-item label="投放区域" prop="touFangArea">
          <el-select v-model="form.touFangArea">
            <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放部门" prop="touFangDept">
          <el-select v-model="form.touFangDept">
            <el-option v-for="item in dept" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放金额" prop="touFangMoney">
          <el-input-number :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.touFangMoney">
          </el-input-number>
        </el-form-item>



      </el-form>
      <el-divider></el-divider>
    </el-row>


    <!-- 修改 -->
    <el-row v-if="!toggleShow">
      <el-divider></el-divider>
      <span v-if="!value">请选择广宣名称</span>
      <!-- 根据下拉框是否有值 显示 -->
      <div v-if="value">
        <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">
          <el-form-item label="广宣名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入广宣名称"></el-input>
          </el-form-item>


          <el-form-item label="日期" prop="date">
            <el-date-picker style="width: 102%;" v-model="form.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="投放方式" prop="touFangmethod">
            <div class="block">
              <el-cascader :show-all-levels="false" clearable v-model="form.touFangMethod" :options="touFangmethods"
                @change="handleChange"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="投放区域" prop="touFangArea">
            <el-select v-model="form.touFangArea">
              <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投放部门" prop="touFangDept">
            <el-select v-model="form.touFangDept">
              <el-option v-for="item in dept" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投放金额" prop="touFangMoney">
            <el-input-number :size="size" style="width:100%;" controls-position="right" :min="0" v-model="form.touFangMoney">
            </el-input-number>
          </el-form-item>


        </el-form>
        <el-divider></el-divider>
      </div>
    </el-row>


  </div>
</template>

<script>
  import treeSelect from '../../components/treeSelect.vue'
  export default {
    components: {
      treeSelect
    },
    data() {
      return {
        area: [{
            label: '城区',
            value: '城区'
          },
          {
            label: '城郊',
            value: '城郊'
          },
          {
            label: '区域外',
            value: '区域外'
          }
        ],
        dept: [{
            label: '销售部',
            value: '销售部'
          },
          {
            label: '二手车部',
            value: '二手车部'
          },
          {
            label: '售后部',
            value: '售后部'
          }
        ],
        touFangmethod: '',
        touFangmethods: [{
            value: '线上投放',
            label: '线上投放',
            children: [{
                value: '共享网络平台',
                label: '共享网络平台',
              },
              {
                value: '广电(报刊)',
                label: '广电(报刊)',
              },
              {
                value: '厂家网络平台',
                label: '厂家网络平台',
              },
              {
                value: '自店网络平台',
                label: '自店网络平台',
              },
            ]
          },
          {
            value: '活动投放',
            label: '活动投放',
            children: [{
                value: '销售活动',
                label: '销售活动',
              },
              {
                value: '服务活动',
                label: '服务活动',
              },
              {
                value: '异业联盟活动',
                label: '异业联盟活动',
              }
            ]
          },
          {
            value: '线下投放',
            label: '线下投放',
            children: [{
                value: '店头',
                label: '店头',
              },
              {
                value: '展会',
                label: '展会',
              },
              {
                value: '外拓',
                label: '外拓',
              },
              {
                value: '转介绍',
                label: '转介绍',
              },
            ]
          }
        ],
        size: 'medium',
        showTree: true,
        option3: {},
        props: {
          value: 'id', // ID字段名
          label: 'name', // 显示名称
          children: 'childrens'
        },
        title: '',
        value2: "",
        //切换新增修改显示
        toggleShow: true,

        form: {
          touFangMethod: '', //投放方式
          touFangArea: '', //投放区域
          touFangDept: '', //投放部门
          touFangMoney: '', //投放金额
          name: '',
          date: ''
        },
        //修改下拉框的值
        options: {},

        //修改下拉框选择之后存的值
        value: '',
        rules: {

          name: [{
            required: true,
            message: '请输入广宣名称',
            trigger: 'blur'
          }],

          touFangMethod: [{
            required: true,
            message: '请选择投放方式',
            trigger: 'blur'
          }],
          touFangArea: [{
            required: true,
            message: '请选择投放区域',
            trigger: 'blur'
          }],
          touFangDept: [{
            required: true,
            message: '请选择投放部门',
            trigger: 'blur'
          }],
          date: [{
            required: true,
            message: '请选择日期',
            trigger: 'blur'
          }],

        }
      }
    },
    methods: {
      treeval(val) {
        this.form.deptId = val;
      },

      //切换v-if
      addShow() {
        this.toggleShow=true
         emptyObj(this.form)
         this.value='';
      },
      editShow() {
        this.value = '';
        this.toggleShow = false
        emptyObj(this.form)
        this.editOptions();

      },

      //查找修改下拉框的值赋给options
      editOptions() {
        this.$ajax.post("advertising2/list", {}).then(res => {
          var result = res.data;
          if (result.success) {
            this.options = result.data
          }
        })
      },

      //保存
      save() {
        this.$refs.form1.validate(valid => {
          if (valid) {

            this.$ajax.post("advertising2/save", this.form).then(res => {
              var result = res.data;
              if (result.success) {
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value = '';
                this.showTree = false;
                this.$nextTick(() => {
                  this.showTree = true;
                });
              }
            })

          }
        })
      },

      //选择下拉框
      editChange(value) {
        this.$ajax.post('advertising2/findbyId', {
          'id': value
        }).then(res => {
          var result = res.data;
          this.form = result.data;
          this.$set(this.form,"name",result.data.adver.name)
           this.$set(this.form,"id",result.data.adver.id)
           this.$set(this.form,"date",new Date(result.data.adver.date))
         if(result.data.touFangMethod){
              var roles = result.data.touFangMethod.split(',')
              var roles1 = []
              for (var arrInt in roles) {
                  roles1.push(roles[arrInt])
              }
              this.$set( this.form,'touFangMethod',roles1);
         }

        })
      },
      editChange2() {

      },

      //点击下拉框×
      qingkong() {
        this.value = '';
      },
      clear() {
        this.ed = {};
      }

    },
    created() {}
  }


  function emptyObj(obj) {
    if(obj.date){
      obj.date=""
    }
    if(obj.touFangMethod){
      obj.touFangMethod=""
    }
    for (var key in obj) {
      var o = obj[key];
      if (o instanceof Object) {
        emptyObj(o);
      } else {
        obj[key] = '';
      }
    }
  }
</script>

<style>
</style>
